if(window.addEventListener) {
window.addEventListener('load', function () {
  
  var canvas, context, canvaso, contexto;

  // The active tool instance.
  var tool;
  var tool_default = 'circle';

  function init () {
    // Find the canvas element.
    canvaso = document.getElementById('imageView');
    if (!canvaso) {
      alert('Error: I cannot find the canvas element!');
      return;
    }

    if (!canvaso.getContext) {
      alert('Error: no canvas.getContext!');
      return;
    }

    // Get the 2D canvas context.
    contexto = canvaso.getContext('2d');
    if (!contexto) {
      alert('Error: failed to getContext!');
      return;
    }

    // Add the temporary canvas.
    var container = canvaso.parentNode;
    canvas = document.createElement('canvas');
    if (!canvas) {
      alert('Error: I cannot create a new canvas element!');
      return;
    }

    canvas.id     = 'imageTemp';
    canvas.width  = canvaso.width;
    canvas.height = canvaso.height;
    container.appendChild(canvas);

    context = canvas.getContext('2d');

    // Get the tool select input.
    var tool_select = document.getElementById('dtool');
    if (!tool_select) {
      alert('Error: failed to get the dtool element!');
      return;
    }
    tool_select.addEventListener('change', ev_tool_change, false);

    // Activate the default tool.
    if (tools[tool_default]) {
      tool = new tools[tool_default]();
      tool_select.value = tool_default;
    }

    // Attach the mousedown, mousemove and mouseup event listeners.
    canvas.addEventListener('mousedown', ev_canvas, false);
    canvas.addEventListener('mousemove', ev_canvas, false);
    canvas.addEventListener('mouseup',   ev_canvas, false);
  }

  // The general-purpose event handler. This function just determines the mouse 
  // position relative to the canvas element.
  function ev_canvas (ev) {
    if (ev.layerX || ev.layerX == 0) { // Firefox
      ev._x = ev.layerX;
      ev._y = ev.layerY;
    } else if (ev.offsetX || ev.offsetX == 0) { // Opera
      ev._x = ev.offsetX;
      ev._y = ev.offsetY;
    }

    // Call the event handler of the tool.
    var func = tool[ev.type];
    if (func) {
      func(ev);
    }
  }

  // The event handler for any changes made to the tool selector.
  function ev_tool_change (ev) {
    if (tools[this.value]) {
      tool = new tools[this.value]();
    }
  }

  // This function draws the #imageTemp canvas on top of #imageView, after which 
  // #imageTemp is cleared. This function is called each time when the user 
  // completes a drawing operation.
  function img_update () {
		contexto.drawImage(canvas, 0, 0);
		context.clearRect(0, 0, canvas.width, canvas.height);
  }

  // This object holds the implementation of each drawing tool.
  var tools = {};

  // The drawing pencil.
  tools.pencil = function () {
    var tool = this;
    this.started = false;

    // This is called when you start holding down the mouse button.
    // This starts the pencil drawing.
    this.mousedown = function (ev) {
		tool.x0 = ev._x;
		tool.y0 = ev._y;

        tool.started = true;
    };

    // This function is called every time you move the mouse. Obviously, it only 
    // draws if the tool.started state is set to true (when you are holding down 
    // the mouse button).
    this.mousemove = function (ev) {
      if (tool.started) {
		new line(new point2d(tool.x0,tool.y0),new point2d(ev._x,ev._y)).drawme(canvas);
		tool.x0 = ev._x;
		tool.y0 = ev._y;
      }
    };

    // This is called when you release the mouse button.
    this.mouseup = function (ev) {
      if (tool.started) {
        tool.mousemove(ev);
        tool.started = false;
        img_update();
      }
    };
  };

  // The circle tool.
  tools.circle = function () {
    var tool = this;
    this.started = false;

    this.mousedown = function (ev) {
      tool.started = true;
      tool.x0 = ev._x;
      tool.y0 = ev._y;
    };

    this.mousemove = function (ev) {
      if (!tool.started) {
        return;
      }

      context.clearRect(0, 0, canvas.width, canvas.height);
		var X = ev._x-tool.x0;
		var Y = ev._y-tool.y0;
		var Z = Math.round(Math.sqrt(Math.pow(X,2)+Math.pow(Y,2)));
		new circle(new point2d(tool.x0,tool.y0),Z).drawme(canvas);
	  
    };

    this.mouseup = function (ev) {
      if (tool.started) {
        tool.mousemove(ev);
        tool.started = false;
        img_update();
      }
    };
  };
  
  
  // The rectangle tool.
  tools.rect = function () {
    var tool = this;
    this.started = false;

    this.mousedown = function (ev) {
      tool.started = true;
      tool.x0 = ev._x;
      tool.y0 = ev._y;
    };

    this.mousemove = function (ev) {
      if (!tool.started) {
        return;
      }

      context.clearRect(0, 0, canvas.width, canvas.height);
	  new quad(new point2d(tool.x0,tool.y0),new point2d(ev._x,ev._y)).drawme(canvas);
	  
    };

    this.mouseup = function (ev) {
      if (tool.started) {
        tool.mousemove(ev);
        tool.started = false;
        img_update();
      }
    };
  };

  // The line tool.
  tools.line = function () {
    var tool = this;
    this.started = false;

    this.mousedown = function (ev) {
      tool.started = true;
      tool.x0 = ev._x;
      tool.y0 = ev._y;
	  
    };

    this.mousemove = function (ev) {
      if (!tool.started) {
        return;
      }
	  
      context.clearRect(0, 0, canvas.width, canvas.height); 
	  new line(new point2d(tool.x0, tool.y0),new point2d(ev._x,   ev._y)).drawme(canvas);
    };

    this.mouseup = function (ev) {
      if (tool.started) {
        tool.mousemove(ev);
        tool.started = false;
        img_update();
      }
    };
  };

 // ------- Declaracao de classes --------------- 
 function point2d(coorX, coorY)
 {
	if (coorX && coorY)
	{
		this.coorX = coorX;
		this.coorY = coorY;
	}
	else
	{
		this.coorX = 0;
		this.coorY = 0;
	}
 }
 
 function line(point1, point2)
 {
	if (point1 && point2)
	{
		this.point1 = point1;
		this.point2 = point2;
	}
	else
	{
		this.point1 = new point2d(0,0);
		this.point2 = new point2d(0,0);
	}
	
	this.drawme = function(drawcanvas) 
	{
		var contexto = drawcanvas.getContext('2d');
		contexto.beginPath();
		contexto.moveTo(this.point1.coorX, this.point1.coorY);
		contexto.lineTo(this.point2.coorX, this.point2.coorY);
		contexto.stroke();
		contexto.closePath();
	};
 }
 
 function quad(point1, point2)
 {
	if (point1 && point2)
	{
		this.point1 = point1;
		this.point2 = point2;
	}
	else
	{
		this.point1 = new point2d(0,0);
		this.point2 = new point2d(0,0);
	}
	
	this.drawme = function(drawcanvas)
	{
		var x = Math.min(this.point2.coorX,  this.point1.coorX),
			y = Math.min(this.point2.coorY,  this.point1.coorY),
			w = Math.abs(this.point2.coorX - this.point1.coorX),
			h = Math.abs(this.point2.coorY - this.point1.coorY);
		var context = drawcanvas.getContext('2d');
		context.strokeRect(x, y, w, h);
	}
 }
 
 function circle(center, radius)
 {
	if (center && radius)
	{
		this.center = center;
		this.radius = radius;
	}
	else
	{
		this.center = new point2d(0,0);
		this.radius = 0;
	}
	
	this.drawme = function(drawcanvas) 
	{
		var context = drawcanvas.getContext('2d');
		context.beginPath();
		context.arc(center.coorX, center.coorY, radius, 0, 2 * Math.PI, false);
		context.stroke();
	}
 }
 
 function form(lines)
 {
	if (lines)
	{
		this.lines = lines;
		
	}
	else
	{
		this.lines = new Array();
		
	}
	
	this.drawme = function(drawcanvas) 
	{
		for(var i = 0; i < lines.length; i++) 
		{
			lines[i].drawme(drawcanvas);
		}
	}
 } 

 function image(vec)
 {
	if (vec)
	{
		this.vec = vec
	}
	else
	{
		this.vec = new Array();
	}
	
	this.drawme = function(drawcanvas) 
	{
		for(var i = 0; i < vec.length; i++) 
		{
			vec[i].drawme(drawcanvas);
		}
	}
	
 }
  
// -----------------------------------------------------------------------------
  init();
	

}, false); }
 
 
 
 
 
 